<template>
  <div class="login">
    <n-form ref="formRef" :show-label="false" :model="form" size="large">
      <n-form-item path="accountMobile">
        <n-input
            v-model:value="form.accountMobile"
            :input-props="{ autocomplete: 'tel', name: 'mobile' }"
            maxlength="11"
            placeholder="请输入手机号"
        >
          <template #prefix>
            <span style="margin-right: 2px">+86</span>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item path="accountPassword">
        <n-input
            v-model:value="form.accountPassword"
            :input-props="{
              autocomplete: 'current-password',
              name: 'password'
            }"
            clearable
            name="password"
            type="password"
            show-password-on="click"
            placeholder="请输入登录密码"
            @keyup.enter="handleSave"
        />
      </n-form-item>
    </n-form>

    <n-space align="center" :size="0" style="margin-bottom: 16px">
      <n-checkbox v-model:checked="checkValue" label="已阅读并同意"/>
      <n-button text tag="a" type="primary" target="_blank">
        技术服务协议
      </n-button>
      、
      <n-button text tag="a" type="primary" target="_blank">
        商家权益及数据安全协议
      </n-button>
    </n-space>

    <n-button
        type="primary"
        size="large"
        style="width: 100%"
        @click="handleSave"
    >
      登 录
    </n-button>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {NButton, NCheckbox, NForm, NFormItem, NInput, NSpace, useMessage} from "naive-ui";
import {reqLogin} from '@/api'
import {useRouter} from "vue-router";
import {setToken} from "@/store/local";

const router = useRouter()
const message = useMessage()
const form = reactive({
  accountMobile: '',
  accountPassword: '',
})
const checkValue = ref(true)

async function handleSave() {
  const resp = await reqLogin(form.accountMobile, form.accountPassword)
  setToken(resp.data.token)
  router.push({name: "Home"})
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
</style>